<script lang="ts" setup>
import { useViewer } from '../../stores/viewer';
import { createBoolRef, createNumberRef } from './sceenConfig';
const viewer: any = useViewer().viewer;
const settingOptions = viewer.zz._settingOptions;

const enableZoom = createBoolRef('enableZoom', settingOptions);
const enableTilt = createBoolRef('enableTilt', settingOptions);
const enableRotate = createBoolRef('enableRotate', settingOptions);
const enableTranslate = createBoolRef('enableTranslate', settingOptions);
const constrainedAxis = createBoolRef('constrainedAxis', settingOptions);
const enableCollisionDetection = createBoolRef('enableCollisionDetection', settingOptions);
const minimumCollisionTerrainHeight = createNumberRef('minimumCollisionTerrainHeight', settingOptions);
const minimumZoomDistance = createNumberRef('minimumZoomDistance', settingOptions);
const maximumZoomDistance = createNumberRef('maximumZoomDistance', settingOptions);
const zoomFactor = createNumberRef('zoomFactor', settingOptions);
</script>
<template>
  <table class="zz-scene-table">
    <tbody>
      <tr>
        <td class="first-col">缩放地图</td>
        <td class="secode-col">
          <el-switch v-model="enableZoom" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td class="first-col">倾斜相机(3D)</td>
        <td class="secode-col">
          <el-switch v-model="enableTilt" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>

      <tr>
        <td class="first-col">旋转转换位置</td>
        <td class="secode-col">
          <el-switch v-model="enableRotate" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>

      <tr>
        <td class="first-col">平移地图(2D)</td>
        <td class="secode-col">
          <el-switch v-model="enableTranslate" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>

      <tr>
        <td class="first-col">可操作南北极</td>
        <td class="secode-col">
          <el-switch v-model="constrainedAxis" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td class="first-col">可否进入地下</td>
        <td class="secode-col">
          <el-switch v-model="enableCollisionDetection" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>

      <tr>
        <td class="first-col">最小碰撞高度({{ minimumCollisionTerrainHeight }}米)</td>
        <td class="secode-col">
          <el-slider :min="1000" :max="100000" :step="1000" v-model="minimumCollisionTerrainHeight" placement="right" />
        </td>
      </tr>

      <tr>
        <td class="first-col">相机最近视距({{ minimumZoomDistance }}米)</td>
        <td class="secode-col">
          <el-slider :min="0.1" :max="1000" :step="1" v-model="minimumZoomDistance" placement="right" />
        </td>
      </tr>

      <tr>
        <td class="first-col">相机最远视距({{ maximumZoomDistance }}米)</td>
        <td class="secode-col">
          <el-slider :min="10000" :max="1000000" :step="10000" v-model="maximumZoomDistance" placement="right" />
        </td>
      </tr>

      <tr>
        <td class="first-col">滚轮放大倍数({{ zoomFactor }})</td>
        <td class="secode-col">
          <el-slider :min="0.1" :max="10" :step="0.1" v-model="zoomFactor" placement="right" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style>
@import './sceneConfig.css';
</style>
